/* 全局样式 - BuildAdmin风格 */
/* 注意：由于vue.config.js已经自动注入SCSS变量，这里不需要手动导入 */

@import './global-fixes.scss';
@import './list-page.scss';
@import './element-overrides.scss';

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #f5f7fa;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

div:focus {
  outline: none;
}

/* 清除浮动 */
.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 页面切换动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s cubic-bezier(.55,0,.1,1);
}
.fade-transform-enter-from {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateY(-20px) scale(0.98);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 4px;

  &:hover {
    background-color: #909399;
  }
}

/* 响应式布局辅助类 */
.hidden-xs-only {
  @media (max-width: 767px) {
    display: none !important;
  }
}

.hidden-sm-and-down {
  @media (max-width: 991px) {
    display: none !important;
  }
}

.hidden-md-and-down {
  @media (max-width: 1199px) {
    display: none !important;
  }
}

/* 常用的间距类 */
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }

.mt-10 { margin-top: 10px !important; }
.mr-10 { margin-right: 10px !important; }
.mb-10 { margin-bottom: 10px !important; }
.ml-10 { margin-left: 10px !important; }

.mt-15 { margin-top: 15px !important; }
.mr-15 { margin-right: 15px !important; }
.mb-15 { margin-bottom: 15px !important; }
.ml-15 { margin-left: 15px !important; }

.mt-20 { margin-top: 20px !important; }
.mr-20 { margin-right: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.ml-20 { margin-left: 20px !important; }

.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }

.pt-10 { padding-top: 10px !important; }
.pr-10 { padding-right: 10px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pl-10 { padding-left: 10px !important; }

.pt-15 { padding-top: 15px !important; }
.pr-15 { padding-right: 15px !important; }
.pb-15 { padding-bottom: 15px !important; }
.pl-15 { padding-left: 15px !important; }

.pt-20 { padding-top: 20px !important; }
.pr-20 { padding-right: 20px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pl-20 { padding-left: 20px !important; }

/* flex布局辅助类 */
.d-flex { display: flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-1 { flex: 1 !important; }

/* 文本辅助类 */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-primary { color: $primaryColor !important; }
.text-success { color: $successColor !important; }
.text-warning { color: $warningColor !important; }
.text-danger { color: $dangerColor !important; }
.text-muted { color: $textSecondary !important; }
.text-bold { font-weight: bold !important; }
.text-nowrap { white-space: nowrap !important; }